/*
	IMPORTS
*/

@import '../bootstrap/less/preboot.less';
@import 'defs.less';
@import 'bootstrap.less';
@import 'yii.less';

/*
	DEFINITIONS
*/

/*
	APPLICATION STYLE
*/

html {
	height: 100%; // we want to make sure that the body expands all the way down
}

body {
    min-height: 100%;
	#grads > .bg-body();
}

// LINKS

a {
	color: @pink;

	&:focus,
	&:hover {
		color: @pinkDark;
	}
}

// BREADCRUMBS

#breadcrumbs {
	color: @grey10;
	font-size: @small;
	height: 20px;
	margin: 15px 0;
	padding: 0 20px;

	span {
		color: @grey2;
	}
} // #breadcrumbs

// FACEBOOK CONNECT

#facebookConnect {
	color: @white;
	margin-top: 20px;
	padding: 11px 20px 9px;
	.border-radius(6px);
	.box-shadow(0 0 6px @grey8);
	.gradientBar(@blue, @blueDark);

	.disclaimer {
		width: 720px;
	}

	.connect {
		margin: 6px 0 8px;
	}
} // #facebookConnect

// CONTENT

#content {
	background: @white;
	padding: 20px;
	.border-radius(6px);
	.box-shadow(0 0 6px @grey8);

	.top {
		position: relative;

		h2 a:hover {
			text-decoration: none;
		}

		.back {
			color: @grey8;
			font-size: @normal;
			position: absolute;
			right: 0;
			text-align: right;
			top: 5px;
			width: 200px;
		}
	}

	// SITE

	.site-index {
		.welcome {
			width: 580px;

			.intro {
				font-size: @large;
				text-align: justify;
			}
		}

		.like-box {
			margin-top: 50px;
		}
	}

	.site-contact {
		.captcha {
			.widget {
				margin-bottom: 10px;

				img {
					border: 1px solid @grey12;
					margin-right: 10px;
					.border-radius(4px);
				}
			}
		}
	}

	.site-page-rules {
		.rules {
			font-size: @large;
			margin-bottom: 0;

			li {
				margin-bottom: 20px;
			}
		}
	}

	// CONTEST

	.contest-view {

		.top {
			margin-bottom: 20px;

			.description {
				color: @grey4;
				margin-bottom: 0;
				text-align: justify;
			}
		}

		.prize {
			border: 1px solid @grey12;
			margin-bottom: 20px;
			padding: 10px;
			position: relative;

			.image {
				margin-right: 20px;
				width:110px;

				img {
					vertical-align: top;
					.border-radius(4px);
					.box-shadow(0 0 4px @grey8);
				}
			}

			.details {
				width: 500px;
				text-align: justify;

				.description {
					text-align: justify;
				}

				.value {
					font-size: @larger;
					margin-bottom: 0;
				}
			}

			.submit-entry {
				bottom: 10px;
				position: absolute;
				right: 10px;
			}
		}

		.entries {
			margin-bottom: 0;
		}

		.like {
			margin-top: 20px;
		}
	} // .contest-view

	.contest-list-view {

		.top {
			margin-bottom: 10px;

			.view-contest,
			.submit-entry {
				margin-left: 10px;
			}
		}

		.entries {
			margin-bottom: 0;
		}

	} // .contest-list-view

	// ENTRY

	.entry-view {

		.top .title {
			width: 760px;

			h1 {
				margin-bottom: 0;
			}
		}

		.image {
			background-color: @grey2;
			margin: 20px 0;
			overflow: hidden;
			position: relative;
			text-align: center;
			.border-radius(6px);

			img {
				vertical-align: middle;
			}

			.next,
			.previous {
				margin-top: -24px;
				position: absolute;
				top: 50%;

				a {
				    display: block;
					height: 48px;

					img {
						vertical-align: top;
					}
				}
			}

			.previous {
				left: 40px;
			}

			.next {
				right: 40px;
			}

			.vote-count {
				background: @black;
				color: @pink;
				font-size: @huge;
				line-height: .8em;
				padding: 20px;
				position: absolute;
				right: 20px;
				top: 20px;
				.border-radius(6px);
			}
		}

		.social {
			height: 40px;
			margin-bottom: 30px;
		}

		.comments {
			.add-link {
				margin: 10px 0;
				height: 40px;
			}

			.list {
			    position: relative;

				.sorter {
					position: absolute;
					right: 0;
					top: -25px;
				}

				.items {
					border: 6px solid @grey12;
					.border-radius(6px);

					.empty {
						display: block;
						padding: 20px;
					}
				}
			}
		}

		.comment-create {
			margin-top: 30px;
		}
	} // .entry-view

	.entry-list-view {
		margin: 0 20px 20px 0;
		position: relative;
		text-align: center;
		width: 210px;

		.image {

			a {
				display: block;
				height: 210px;

				img {
					vertical-align: top;
					.border-radius(4px);
				}
			}

			.vote-count {
				color: @pink;
				background: @black;
				font-size: @larger;
				height: 14px;
				line-height: .9em;
				padding: 8px;
				position: absolute;
				right: 5px;
				top: 5px;
				.border-radius(4px);
			}
		}
	} // .entry-item-view

	.entry-thumb-view {
		margin: 8.5px 8.5px 0 0;
		position: relative;
		text-align: center;
		width: 100px;

		.image {

			a {
				display: block;
				height: 100px;

				img {
					vertical-align: top;
					.border-radius(3px);
				}
			}

			.vote-count {
				color: @pink;
				background: @black;
				font-size: @small;
				height: 14px;
				line-height: 1.1em;
				padding: 4px;
				position: absolute;
				right: 5px;
				top: 5px;
				.border-radius(4px);
			}
		}
	} // .entry-thumb-view

	.entry-list-vote-count {
		color: @pink;
		background: @black;
		height: 14px;
		line-height: 1em;
		padding: 5px 8px;
		position: absolute;
		right: 5px;
		top: 5px;
		.border-radius(4px);
	}

	.entry-submit {
		.note {
			color: @grey8;
			font-style: italic;
		}

		.theme {
			font-size: @small;
		}
	} // .entry submit

	// COMMENT

	.comment-view {
		border-bottom: 1px solid @grey12;
		color: @grey2;
		margin-bottom: 0;
		min-height: 100px;
		position: relative;
		#grads > .bg-comment();

		&.bottom {
			border-bottom-style: none;
		}

		.column-left {
			padding: 10px;
			width: 120px;
		}

		.column-right {
			min-height: 110px;
			padding: 10px 338px 10px 10px;
			position: relative;
			width: 400px;
			#grads > .bg-comment-right();

			.body {
				margin-bottom: 20px;
			}

			.edited {
				bottom: 5px;
				font-size: @small;
				font-style: italic;
				font-weight: bold;
				left: 10px;
				margin: 10px 0 0;
				position: absolute;
			}

			blockquote {
				background: @grey13;
				border: 1px solid @grey8;
				margin: 0 0 10px 0;
				padding: 5px;
				.border-radius(4px);

				p {
					font-weight: bold;
					margin: 0;
				}
			}
		}

		.alias {
			font-weight: bold;
		}

		.link,
		.created {
			font-size: @smaller;
			margin: 0 0 5px 0;
		}

		.rate-buttons {
			font-size: @smaller;

			a {
				display: inline-block;
				height: 24px;
			}

			img {
				margin-bottom: -5px;
			}

			.up,
			.down {
				margin-right: 10px;
			}

			.report {
				margin-right: 2px;
			}

			.rated  {
				img {
					opacity: 0.6;
				}
			}
		}

		.body {
			margin: 0;
		}

		.info {
			position: absolute;
			right: 10px;
			text-align: right;
			top: 10px;
		}

		.buttons {
			position: absolute;
			right: 10px;
			bottom: 10px;
		}
	} // .comment-view

	.comment-body {
		display: inline;
		width: 400px;

		.markItUp {
			display: inline;
			width: inherit;

			.markItUpContainer {
				display: inline;

				.markItUpHeader {
					height: 30px;
					margin: 0 0 5px 0;

					.markItUpButton {
						border: 1px solid @grey8;
						margin: 0 5px 0 0;
						padding: 0;
						.border-radius(3px);
						#grads > .bg-markitup-button();

						a {
							background-position: 5px 5px;
							padding: 5px;
						}
					}

					.markItUpButton:hover {
						.box-shadow(0 0 3px @grey8);
					}

					.markItUpButton6,
					.markItUpButton7,
					.markItUpButton8,
					.markItUpButton9,
					.markItUpButton11,
					.markItUpButton12,
					.markItUpButton13,
					.markItUpSeparator {
						display: none !important;
					}
				}

				.body {
					height: 180px;
					width: 400px;
				}

				.markItUpFooter {
					clear: both;
					display: inline-block;
					width: inherit;
				}
			}
		}
	} // .comment-body

	#emoticons {
		margin-top: 10px;

		img {
			vertical-align: top;
		}
	}

	// FORM

	fieldset {
		margin-bottom: 0;

		form {
			margin-bottom: 0;

			span.required {
				color: @red;
			}

			.help-block {
				margin-top: 5px;
			}

			div.error {
				label,
				.help-inline,
				.help-block {
					color: @redDark;
				}

				.help-inline {
					display: inline;
				}
			}

			.input label {
				width: auto;

				input[type="checkbox"],
				input[type="radio"]	{
					margin-right: 5px;
				}
			}

			.image {
				margin-top: 20px;
			}

			.actions {
				margin-bottom: 0;
			}
		}
	}

	// jQuery UI style

	#ui-datepicker-div {
		display: none;
	}

} // #content

#footer {
	border-style: none;
	color: @grey4;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}

// FLASH MESSAGE

div.flash {
	left: 0;
	position: fixed;
	_position: absolute; /* IE */
	top: 0;
	width: 100%;
	z-index: 10001; // one level higher than the bootstrap topbar

	.alert-message {
		margin: 0;
		padding: 15px 0;
		.border-top-left-radius(0);
		.border-top-right-radius(0);

		.container {
			font-size: @xlarge;
			margin-bottom: 0;
			margin-top: 0;
		}
	}
} // div.flash

/*
	HELPER CLASSES
*/

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.last {
	margin-right: 0 !important;
}

.bottom {
	margin-bottom: 0 !important;
}